<template>
  <div>
    <div>
      <el-input size="small" clearable v-model="listQuery.param.userName" style="width: 200px;" placeholder="请输入用户名">
      </el-input>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleFilter" style="margin-left:10px;">
        查询
      </el-button>
      <el-button size="small" v-if="add_project_user_button_status" icon="el-icon-plus" style="margin-left:10px;" @click="handleAdd">
        新增
      </el-button>
    </div>

    <el-table :data="projectUserLists" style="width: 100%">
      <el-table-column prop="id" v-if="false"></el-table-column>
      <el-table-column label="账号" prop="userName"></el-table-column>
      <el-table-column label="用户名称" prop="nickName"></el-table-column>
      <el-table-column label="用户角色" prop="roles" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="200" fixed="right" v-if="del_project_user_button_status">
        <template slot-scope="scope">
          <el-button v-if="del_project_user_button_status" type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 40, 100]" :page-size="listQuery.size" :current-page="listQuery.page" layout="total, sizes, prev, pager, next, jumper" :total="projectUserTotal">
    </el-pagination>

    <el-dialog title="添加人员" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="45%">
      <el-table :data="extraUserLists" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column prop="id" v-if="false"></el-table-column>
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="userName" label="账号"></el-table-column>
        <el-table-column prop="nickName" label="用户名称"></el-table-column>
        <el-table-column prop="roles" label="角色"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button @click="dialogFormVisible=false">
          取 消
        </el-button>
        <el-button type="primary" @click="handleAddUser()">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import {
  addProjectUser, delProjectUserInfo, getProjectUserInfo, getUserOutsizeProject
} from '@/api/projectUserInfo'

export default {
  name: 'ProjectUserPage',
  props: {
    ProjectId: {
      type: Number
    }
  },
  watch: {
    ProjectId(newVal, oldVal) {
      console.log("user old: " + oldVal + ", new: " + newVal + ", watch: " + this.isWatch);
      this.projectId = newVal;
      this.listQuery.param.projectId = newVal;
      if (newVal === 0) {
        this.projectUserLists = [];
        this.projectUserTotal = 0;
      } else if (this.isWatch) {
        this.handleFilter();
      }
    }
  },
  data() {
    return {
      isWatch: false,
      projectId: 0,
      listQuery: {
        page: 1,
        size: 10,
        param: {
          projectId: 0,
          userName: undefined,
        }
      },
      projectUserLists: [],
      extraUserLists: [],
      projectUserTotal: 0,
      dialogFormVisible: false,
      userSelection: [], // 人员选中项
      successCode: 20000,

      add_project_user_button_status: false,
      del_project_user_button_status: false,
    }
  },
  computed: {
    ...mapGetters(["elements"])
  },
  created() {
    if (this.elements['add_project_user']) {
      this.add_project_user_button_status = true;
    }
    if (this.elements['del_project_user']) {
      this.del_project_user_button_status = true;
    }
  },
  mounted() {
  },
  methods: {
    show() {
      this.isWatch = true;
      if (!this.projectId) {
        this.projectUserLists = [];
        this.projectUserTotal = 0;
        return;
      }
      this.handleFilter();
    },
    hide() {
      this.isWatch = false;
    },
    getExtraUserList() {
      getUserOutsizeProject(this.ProjectId).then(resp => {
        if (resp.code === this.successCode) {
          this.extraUserLists = resp.datas;
        }
      });
    },
    handleFilter() {
      getProjectUserInfo(this.listQuery).then(resp => {
        if (resp.code === this.successCode) {
          this.projectUserLists = resp.datas.datas;
          this.projectUserTotal = resp.datas.total;
        }
      })
    },
    handleAdd() {
      this.dialogFormVisible = true;
      this.userSelection = [];
      this.getExtraUserList();
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delProjectUserInfo({
          userId: row.userId,
          projectId: this.ProjectId
        }).then(resp => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          this.handleFilter();
        });
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.handleFilter();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.handleFilter();
    },
    handleAddUser() {
      var data = {
        projectId: this.ProjectId,
        userId: this.userSelection.map(x => x.id)
      }
      addProjectUser(data).then(resp => {
        if (resp.code === this.successCode) {
          this.dialogFormVisible = false;
          this.handleFilter();
        }
      });
    },
    handleSelectionChange(val) {
      this.userSelection = val;
    }
  }
}
</script>